<template>
	<div class="live-chat-container">
		<!-- 聊天消息区域 -->
		<div class="chat-messages" ref="chatContainer">
			<el-scrollbar height="380px">

				<div class="message-list">

					<div style="background: rgba(0, 0, 0, 0.5);
					margin-bottom: 10px;
					color: #fff;
					font-size: 14px;
					padding: 6px 4px;
					border-radius: 5px;
					white-space: pre-wrap;
					align-self: flex-start;
					transition: opacity 0.3s ease;" v-for="(message, index) in messages" :key="index">
						<div class="username" style="font-weight: 500;
					color: #8ce7ff;
					display: inline-block;">
							{{ message.username }}<span v-if="message.isAdmin" class="admin-tag">管理员</span>:
						</div>

						{{ message.content }}

						<div style="display: flex; justify-content: flex-end;">
							<span style="color:#fff" v-time.tip="'2025-05-09 17:01:01'">

							</span>
						</div>

						<div v-if="message.gift" class="gift-info">
							<el-tag type="danger">赠送{{ message.gift.name }} x{{ message.gift.count }}</el-tag>
						</div>

					</div>

					<div v-if="false" v-for="(message, index) in messages" :key="index"
						:class="['message-item', message.type]">
						<div class="user-info">
							<el-avatar :size="32" :src="message.avatar">
								{{ message.username.substring(0, 1).toUpperCase() }}
							</el-avatar>
							<span class="username" :style="{ color: message.userColor }">
								{{ message.username }}
								<span v-if="message.isAdmin" class="admin-tag">管理员</span>
								<span v-if="message.isVip" class="vip-tag">VIP</span>
							</span>
						</div>
						<div class="message-content">
							<p>{{ message.content }}</p>
							<span class="message-time">{{ formatTime(message.timestamp) }}</span>
						</div>
						<div v-if="message.gift" class="gift-info">
							<el-tag type="danger">赠送{{ message.gift.name }} x{{ message.gift.count }}</el-tag>
						</div>
					</div>
				</div>
			</el-scrollbar>
		</div>

		<!-- 发送消息区域 -->
		<div class="message-input">
			<el-input v-model="newMessage" placeholder="发送一条消息..." :maxlength="100" show-word-limit clearable
				@keyup.enter="sendMessage">
				<template #append>
					<el-button type="primary" @click="sendMessage" :disabled="!newMessage.trim()">
						<el-icon>
							<Position />
						</el-icon> 发送
					</el-button>
				</template>
				<template #prefix>
					<el-dropdown trigger="click" @command="handleEmojiSelect">
						<el-icon class="emoji-icon">
							<ScIconEmoji />
						</el-icon>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item v-for="emoji in emojis" :key="emoji" :command="emoji">
									{{ emoji }}
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</el-input>
		</div>

		<!-- 操作按钮区 -->
		<div class="chat-controls">
			<el-button-group>
				<el-button type="info" @click="clearMessages">
					<el-icon>
						<Delete />
					</el-icon> 清空消息
				</el-button>
				<el-button type="warning" @click="toggleChatStatus">
					{{ isChatEnabled ? '禁言' : '解除禁言' }}
				</el-button>
				<el-button type="primary" @click="showSettingsDialog">
					<el-icon>
						<Setting />
					</el-icon> 设置
				</el-button>
			</el-button-group>
		</div>

		<!-- 设置对话框 -->
		<el-dialog v-model="settingsVisible" title="公屏设置" width="400px">
			<el-form :model="settings" label-width="100px">
				<el-form-item label="消息速度限制">
					<el-slider v-model="settings.messageSpeed" :min="1" :max="10"
						:format-tooltip="formatMessageSpeed" />
				</el-form-item>
				<el-form-item label="敏感词过滤">
					<el-switch v-model="settings.filterEnabled" />
				</el-form-item>
				<el-form-item label="敏感词列表" v-if="settings.filterEnabled">
					<el-tag v-for="(word, index) in settings.filteredWords" :key="index" closable
						@close="removeFilterWord(index)">
						{{ word }}
					</el-tag>
					<el-input v-if="inputWordVisible" ref="inputWordRef" v-model="inputWord" size="small"
						style="width: 100px; margin-left: 10px" @keyup.enter="addFilterWord" @blur="addFilterWord" />
					<el-button v-else size="small" @click="showWordInput">
						+ 添加敏感词
					</el-button>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="settingsVisible = false">取消</el-button>
					<el-button type="primary" @click="saveSettings">保存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue';
	import {
		Delete,
		Setting,
		Position,
		Avatar
	} from '@element-plus/icons-vue';
	import {
		ElMessage
	} from 'element-plus';

	// 消息列表
	const messages = ref([{
			username: '系统通知',
			content: '欢迎来到直播间',
			timestamp: Date.now(),
			type: 'system',
			avatar: '',
			isAdmin: true,
			userColor: '#ff9900'
		},
		{
			username: '张三',
			content: '主播好厉害！',
			timestamp: Date.now() - 60000,
			type: 'normal',
			avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
			isVip: true,
			userColor: '#3598db'
		},
		{
			username: '李四',
			content: '支持主播！',
			timestamp: Date.now() - 120000,
			type: 'normal',
			avatar: '',
			userColor: '#2ecc71'
		},
		{
			username: '王五',
			content: '太精彩了',
			timestamp: Date.now() - 180000,
			type: 'normal',
			avatar: '',
			gift: {
				name: '超级火箭',
				count: 1
			},
			userColor: '#e74c3c'
		}
	]);

	const newMessage = ref('');
	const chatContainer = ref(null);
	const isChatEnabled = ref(true);
	const settingsVisible = ref(false);
	const inputWordVisible = ref(false);
	const inputWord = ref('');
	const inputWordRef = ref(null);

	// 表情列表
	const emojis = ['😊', '😂', '👍', '❤️', '🎉', '👏', '🔥', '🤔', '😎', '😍'];

	// 设置选项
	const settings = reactive({
		messageSpeed: 5,
		filterEnabled: true,
		filteredWords: ['脏话', '广告', '敏感词']
	});

	// 格式化消息速度
	const formatMessageSpeed = (val) => {
		return `每${Math.floor(10 / val)}秒`;
	};

	// 格式化时间
	const formatTime = (timestamp) => {
		const date = new Date(timestamp);
		const hours = date.getHours().toString().padStart(2, '0');
		const minutes = date.getMinutes().toString().padStart(2, '0');
		return `${hours}:${minutes}`;
	};

	// 发送消息
	const sendMessage = () => {
		if (!newMessage.value.trim()) return;
		if (!isChatEnabled.value) {
			ElMessage.warning('当前聊天室已禁言');
			return;
		}

		// 检查敏感词
		if (settings.filterEnabled) {
			const hasFilteredWord = settings.filteredWords.some(word =>
				newMessage.value.includes(word)
			);

			if (hasFilteredWord) {
				ElMessage.error('消息包含敏感词，已被过滤');
				return;
			}
		}

		const message = {
			username: '柏乐口腔',
			content: newMessage.value,
			timestamp: Date.now(),
			type: 'normal',
			avatar: '',
			isAdmin: true,
			userColor: '#409EFF'
		};

		messages.value.push(message);
		newMessage.value = '';

		// 滚动到底部
		nextTick(() => {
			const scrollContainer = chatContainer.value.querySelector('.el-scrollbar__wrap');
			if (scrollContainer) {
				scrollContainer.scrollTop = scrollContainer.scrollHeight;
			}
		});
	};

	// 清空消息
	const clearMessages = () => {
		messages.value = [{
			username: '系统通知',
			content: '消息已清空',
			timestamp: Date.now(),
			type: 'system',
			avatar: '',
			isAdmin: true,
			userColor: '#ff9900'
		}];
	};

	// 切换聊天状态
	const toggleChatStatus = () => {
		isChatEnabled.value = !isChatEnabled.value;

		messages.value.push({
			username: '系统通知',
			content: isChatEnabled.value ? '聊天室已开启' : '聊天室已禁言',
			timestamp: Date.now(),
			type: 'system',
			avatar: '',
			isAdmin: true,
			userColor: '#ff9900'
		});
	};

	// 显示设置对话框
	const showSettingsDialog = () => {
		settingsVisible.value = true;
	};

	// 保存设置
	const saveSettings = () => {
		ElMessage.success('设置已保存');
		settingsVisible.value = false;
	};

	// 添加敏感词
	const showWordInput = () => {
		inputWordVisible.value = true;
		nextTick(() => {
			inputWordRef.value.focus();
		});
	};

	const addFilterWord = () => {
		if (inputWord.value) {
			settings.filteredWords.push(inputWord.value);
			inputWord.value = '';
		}
		inputWordVisible.value = false;
	};

	const removeFilterWord = (index) => {
		settings.filteredWords.splice(index, 1);
	};

	// 选择表情
	const handleEmojiSelect = (emoji) => {
		newMessage.value += emoji;
	};

	// 组件挂载后滚动到底部
	onMounted(() => {
		nextTick(() => {
			const scrollContainer = chatContainer.value.querySelector('.el-scrollbar__wrap');
			if (scrollContainer) {
				scrollContainer.scrollTop = scrollContainer.scrollHeight;
			}
		});
	});
</script>

<style scoped>
	.live-chat-container {
		width: 100%;
		min-width: 450px;
		border: 1px solid #ebeef5;
		border-radius: 4px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 10px;
	}

	.chat-messages {
		background-color: #f9f9f9;
		border-radius: 4px;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.message-list {
		padding: 10px;
	}

	.message-item {
		margin-bottom: 15px;
		padding: 10px;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.message-item.system {
		background-color: #fef0f0;
		border-left: 3px solid #f56c6c;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.username {
		margin-left: 8px;
		font-weight: 600;
	}

	.admin-tag {
		display: inline-block;
		background-color: #f56c6c;
		color: white;
		font-size: 12px;
		padding: 0 5px;
		border-radius: 4px;
		margin: 0px 3px;
	}

	.vip-tag {
		display: inline-block;
		background-color: #e6a23c;
		color: white;
		font-size: 12px;
		padding: 0 5px;
		border-radius: 4px;
		margin-left: 5px;
	}

	.message-content {
		padding: 5px 0;
	}

	.message-content p {
		margin: 0;
		word-break: break-word;
	}

	.message-time {
		display: block;
		font-size: 12px;
		color: #909399;
		margin-top: 5px;
		text-align: right;
	}

	.gift-info {
		margin-top: 8px;
		text-align: right;
	}

	.message-input {
		margin-bottom: 10px;
	}

	.chat-controls {
		display: flex;
		justify-content: flex-end;
	}

	.emoji-icon {
		cursor: pointer;
		font-size: 18px;
		color: #909399;
	}

	.emoji-icon:hover {
		color: #409EFF;
	}
</style>
